<template>
  <view class="parking-page">
    <!-- 停车功能入口 -->
    <view class="parking-functions">
      <!-- 车位查询 -->
      <service-card
        title="车位查询"
        description="查询可用车位、预约车位"
        icon-name="search"
        theme-color="#3498db"
        @click="goToSpaceQuery"
      />

      <!-- 车辆管理 -->
      <service-card
        title="车辆管理"
        description="添加、管理我的车辆"
        icon-name="car"
        theme-color="#2ed573"
        :badge="vehicleBadge"
        badge-icon="plus"
        badge-color="#3742fa"
        @click="goToVehicleManagement"
      />

      <!-- 停车缴费 -->
      <service-card
        title="停车缴费"
        description="在线缴费、费用查询"
        icon-name="wallet"
        theme-color="#ff9500"
        :badge="paymentBadge"
        badge-icon="exclamation-circle"
        badge-color="#ff4757"
        @click="goToParkingPayment"
      />

      <!-- 停车记录 -->
      <service-card
        title="停车记录"
        description="查看历史停车记录"
        icon-name="list"
        theme-color="#9b59b6"
        @click="goToParkingRecords"
      />

      <!-- 充电桩 -->
      <service-card
        title="充电桩"
        description="充电桩查询、预约充电"
        icon-name="battery"
        theme-color="#27ae60"
        @click="goToChargingStation"
      />

      <!-- 停车设置 -->
      <service-card
        title="停车设置"
        description="通知设置、自动缴费"
        icon-name="setting"
        theme-color="#95a5a6"
        @click="goToParkingSettings"
      />
    </view>
  </view>
</template>

<script setup>
/**
 * 停车管理页面 - 重构版本
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 2.0 - 按照ServiceCard组件规范重构
 */

import { ref, reactive, computed, onMounted } from 'vue'
import ServiceCard from '@/components/ServiceCard.vue'
import { getIconThemeColor } from '@/utils/themeColors'
import { hasMenuPermission } from '@/utils/permission'

// 停车信息
const parkingInfo = reactive({
  totalSpaces: 120,
  occupiedSpaces: 85,
  availableSpaces: 35
})

// 我的车辆
const myVehicles = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    type: '小型汽车',
    statusText: '已停车',
    statusType: 'success',
    location: 'A区-123号'
  },
  {
    id: 2,
    plateNumber: '京B67890',
    type: '小型汽车',
    statusText: '未停车',
    statusType: 'info'
  }
])

// 停车记录
const parkingRecords = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    status: 'completed',
    statusText: '已完成',
    statusType: 'success',
    entryTime: '2025-01-21 08:30',
    exitTime: '2025-01-21 18:00',
    fee: 15.00
  },
  {
    id: 2,
    plateNumber: '京A12345',
    status: 'parking',
    statusText: '停车中',
    statusType: 'warning',
    entryTime: '2025-01-21 19:00',
    fee: 0
  },
  {
    id: 3,
    plateNumber: '京B67890',
    status: 'completed',
    statusText: '已完成',
    statusType: 'success',
    entryTime: '2025-01-20 09:00',
    exitTime: '2025-01-20 17:30',
    fee: 12.00
  }
])

// 计算属性
const recentParkingRecords = computed(() => {
  return parkingRecords.value.slice(0, 3) // 只显示最近3条记录
})

const unpaidRecords = computed(() => {
  return parkingRecords.value.filter(record => record.fee > 0 && record.status === 'completed')
})

const vehicleBadge = computed(() => {
  return myVehicles.value.length > 0 ? myVehicles.value.length.toString() : ''
})

const paymentBadge = computed(() => {
  return unpaidRecords.value.length > 0 ? unpaidRecords.value.length.toString() : ''
})

// 页面跳转方法
const goToSpaceQuery = () => {
  uni.navigateTo({ url: '/pages/parking/space-query' })
}

const goToVehicleManagement = () => {
  uni.navigateTo({ url: '/pages/parking/vehicle-management' })
}

const goToParkingPayment = () => {
  uni.navigateTo({ url: '/pages/parking/payment' })
}

const goToParkingRecords = () => {
  uni.navigateTo({ url: '/pages/parking/record' })
}

const goToChargingStation = () => {
  uni.navigateTo({ url: '/pages/parking/charging' })
}

const goToParkingSettings = () => {
  uni.navigateTo({ url: '/pages/parking/settings' })
}

// 页面加载
onMounted(() => {
  // 加载停车状态数据
  loadParkingStatus()
  // 加载我的车辆数据
  loadMyVehicles()
  // 加载停车记录
  loadParkingRecords()
})

// 数据加载方法
const loadParkingStatus = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载停车状态')
  } catch (error) {
    console.error('加载停车状态失败:', error)
  }
}

const loadMyVehicles = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载我的车辆')
  } catch (error) {
    console.error('加载我的车辆失败:', error)
  }
}

const loadParkingRecords = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载停车记录')
  } catch (error) {
    console.error('加载停车记录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.parking-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.parking-functions {
  margin-bottom: 20px;
}
</style> 